import { Component, TemplateRef, ViewChild } from '@angular/core';
import { ModalService } from '@iux/live';
import { of, Subject, timer } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  templateUrl: './demo3.component.html',
})
export class Demo3Component {
  constructor(private modalService: ModalService) {}
  public close$ = new Subject<boolean>();
  @ViewChild('contentTpl', { static: false }) contentTpl: TemplateRef<any>;

  open1() {
    this.modalService.create({
      lvModalKey: 'myModal1',
      lvHeader: 'async',
      lvContent: this.contentTpl,
      lvWidth: 500,
      lvOk: () =>
        new Promise<void>(resolve => {
          setTimeout(() => {
            resolve();
          }, 2000);
        }),
      lvOkLoadingText: 'async...',
    });
  }

  open2() {
    this.modalService.create({
      lvModalKey: 'myModal2',
      lvHeader: 'Observe',
      lvContent: this.contentTpl,
      lvWidth: 500,
      lvOk: () => of(true).pipe(delay(2000)),
      lvOkLoadingText: 'observe...',
    });
  }

  open3() {
    this.modalService.create({
      lvModalKey: 'myModal3',
      lvHeader: 'async',
      lvContent: this.contentTpl,
      lvWidth: 500,
      lvFooter: this.buttons,
    });
  }

  buttons = [
    {
      id: '1',
      label: 'primary',
      type: 'primary',
      loadingText: 'async...',
      onClick: (modal, button) => {
        button.loading = true;
        setTimeout(() => {
          button.label = 'Asynchronous failed';
          button.loading = false;
          button.disabled = true;
        }, 2000);
      },
    },
    {
      id: '2',
      label: 'close',
      onClick: (modal, button) => {
        modal.close();
      },
    },
  ];
}
